<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>商户系统 - </title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="icon" id="mainSiteIcon" type="image/x-icon" />
    <link rel="stylesheet" href="start/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="src/style/home.css" media="all">
    <style>
        .pay-product-list {
            display: flex;
            flex-wrap: wrap;
            overflow: hidden;
            align-items: center;
        }
        .pay-product {
            margin: 0 10px 10px 0;
            padding: 10px 15px;
            border: 1px solid #e2e2e2;
            cursor: pointer;
        }
        .pay-product-none {
            margin: 0 10px 10px 0;
            padding: 10px 15px;
            border: 1px solid #e2e2e2;
        }
        .pay-product-list .pay-product-this {
            color: #1E9FFF;
            border-color: #1E9FFF;
        }
        .login-button{
            width: 250px;
            height: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
            max-width: 100%;
            background: linear-gradient(to right, #48D9C0, #02B3B3) ;
            border-radius: 5px;
            transition: 0.3s ease;
            cursor: pointer;
            color: #ffffff;
        }
        .top-pallet .layui-form-item{padding: 10px 0 20px 0}
        .top-pallet .layui-form-item .layui-input-inline{width: 60%;}
        @media screen and (max-width: 768px) {
            .top-pallet .layui-form-item{padding: 0}
            .top-pallet .layui-form-item .layui-form-label {width: 60px;}
            .top-pallet .layui-form-item .layui-input-inline {margin: 0 0 10px 92px;}
        }
    </style>
</head>
<body>
    <div class="header" style="background: #0a253a;">
        <div class="logo-box" id="siteLogo"></div>
        <div class="switch">
            <div class="switch-line"></div>
            <div class="switch-line"></div>
        </div>
        <div class="header-link-box">
            <a href="/">首页</a>
            <a href="/demo.html">支付体验</a>
            <a class="top-nav-link" href="/start/index.html#/user/login">
                <div class="web-link">商户登录</div>
                <img src="/images/home/arrow1CB7A2.svg" alt="" class="link-arrow" />
            </a>
        </div>
    </div>
    <div class="container" style="background: #FFFFFF;">
        <div class="top-pallet" style="padding: 80px 0;margin-bottom: 60px;">
            <div class="top-background" style="padding: 0;background: #0a253a;height: 500px;">
                <div class="layui-container" style="margin-top: 60px;max-width: 100%;">
                    <div class="layui-row" style="padding:20px;box-shadow: 0 2px 10px 0 rgba(0,0,0,0.1);background: #ffffff;">
                        <div style="display:none" id="formJump"></div>
                        <div style="padding: 10px 0">
                            <span id="siteTitle">支付流程体验</span>
                        </div>
                        <hr>
                        <div class="layui-col-xs12 layui-col-sm8 layui-col-sm-offset1">
                            <div class="layui-row layui-form payTest">
                                <div class="layui-form-item" style="padding-bottom: 10px;">
                                    <label class="layui-form-label">支付产品</label>
                                    <div class="layui-input-inline">
                                        <div class="pay-product-list" id="productList">
                                            <div class="layui-hide pay-product-none">暂无支付产品</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">金额(元)</label>
                                    <div class="layui-input-inline">
                                        <input type="number" name="amount" id="amount" lay-verify="required" placeholder="请输入金额" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">商品标题</label>
                                    <div class="layui-input-inline">
                                        <input type="text" id="subject" name="subject" lay-verify="required" autocomplete="off" placeholder="请输入subject" class="layui-input" value="支付测试">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">商品描述</label>
                                    <div class="layui-input-inline">
                                        <input type="text" id="body" name="body" lay-verify="required" autocomplete="off" placeholder="请输入body" class="layui-input" value="支付测试">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">扩展参数</label>
                                    <div class="layui-input-inline">
                                        <input type="text" id="extra" name="extra" autocomplete="off" placeholder="请输入扩展参数（非必填）" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item dopay" style="padding: 20px 0;">
                                    <div class="layui-input-inline" style="margin: auto">
                                        <div class="login-button mch-login" lay-submit lay-filter="LAY-pay-test-submit" onclick="return false;">开始支付</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="footer" style="padding-top: 20px">
                    <div class="footer-pallet">
                        <div class="copyright" id="copyRight"></div>
                        <div class="links-box">
                            <p id="serviceTel"></p>
                            <p id="serviceQQ" style="margin-right: 30px"></p>
                            <a href="">关于我们</a>
                            <a href="">开发文档</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="top-background-bottom layui-hide-xs">
                <img src="/images/home/home-top-background-bottom.svg" alt="" />
            </div>
        </div>

    </div>
<script src="/js/jquery-1.11.1.js"></script>
<script src="/js/home.js"></script>
<script src="/start/layui/layui.js"></script>
<script>
    layui.use(['form'], function(){
        var $ = layui.$
        ,form = layui.form;

        //变更网站标题
        $.ajax({
            async: false, type: 'get',
            url: 'api/auth/siteTitle',
            success: function(res){
                $('title').append(res.data.siteTitle);
                $("#siteLogo").append('<img src="'+res.data.siteLogo+'" style="height: 30px;" alt="'+res.data.siteTitle+'">');
                $("#copyRight").text(res.data.copyRight);
                $("#serviceTel").append(res.data.serviceTel);
                $("#serviceQQ").attr("href", 'http://wpa.qq.com/msgrd?v=3&uin='+res.data.serviceQQ+'&site=qq&menu=yes').append(res.data.serviceQQ);

                let siteIcon = res.data.siteIcon;
                if(siteIcon.startsWith("http://") || siteIcon.startsWith("https://")){
                    layui.$("#mainSiteIcon")[0].href = siteIcon;
                }else{
                    layui.$("#mainSiteIcon")[0].href = window.location.origin + siteIcon;
                }
            }
        });

        // 获取支付方式列表
        $.ajax({
            type: 'post',
            url: '/api/paytest/mch_pay_passage/list',
            success: function(res){
                if(res.code == 0){
                    if (res.data.length > 0) {
                        $("#productList").append("<div class='pay-product pay-product-this' data-productId='" + res.data[0]['productId'] + "'>"+res.data[0]['productName']+"</div>");
                        for(var i = 1; i < res.data.length; i++){
                            $("#productList").append("<div class='pay-product' data-productId='" + res.data[i]['productId'] + "'>"+res.data[i]['productName']+"</div>");
                        }
                    } else {
                        $(".pay-product-none").removeClass("layui-hide");
                    }
                    form.render();
                }
            }
        });

        // 切换支付产品
        $('body').on('click', '.pay-product', function(){
            $('.pay-product').removeClass('pay-product-this');
            $(this).addClass("pay-product-this");
        });

        //提交
        form.on('submit(LAY-pay-test-submit)', function(data){
            data.field.type = 'recharge';

            var productId = $('.pay-product-this').attr("data-productId");
            data.field.productId = productId;

            var amount = $("#amount").val();
            if( parseFloat(amount) > parseFloat(0) && parseFloat(amount)< parseFloat(1000000)){
                var loadIndex = layer.load(1);
                $.ajax({
                    type: 'post',
                    url: '/api/paytest/create',
                    data: data.field,
                    success: function(res){
                        layer.close(loadIndex);
                        if(res.code == 0) {
                            var data = res.data;
                            var payMethod = data.payMethod;
                            if(payMethod == 'formJump') {
                                var payUrl = data.payUrl;
                                $('#formJump').html(payUrl);
                            }else if(payMethod == 'codeImg') {
                                var codeImgUrl = data.codeImgUrl;
                                layer.open({
                                    title: "扫描二维码支付",
                                    type: 1,
                                    anim: 1,
                                    content: "<img style='padding:20px' src='" +  codeImgUrl + "' />"
                                });
                            }else {
                                layer.open({
                                    title: "支付结果",
                                    content: JSON.stringify(data)
                                });
                            }
                        }else {
                            layer.alert(res.msg);
                        }
                    },
                    error: function (err) {
                        layer.close(loadIndex);
                        console.log(err);
                    }
                });
            }else{
                layer.msg("输入金额请在10000以内");
            }
        });

        form.render();
    });
</script>
</body>
</html>

